<template>
    <div class="index cell-field">
        <TopTitle :Title="TitleText" v-show="isShow?false:true" propsRightIconShow=true></TopTitle>
        <div class="title-conter">
            <h2 class="field-title">Field</h2>
            <!-- <ruoter-view></ruoter-view> -->
            <div>
                <ul>
                    <li class="field-warp clearfix">
                        <span class="field-icon-warp fl" v-show="fieldIconIsshow?true:false"><img :src="fieldIcon" alt="图标" class="field-icon"/></span>
                        <span class="field-text-warp fl">{{fieldTitle}}:</span>
                        <input 
                            class="field fl"
                            v-model="message"
                            :placeholder="fieldPlaceholder" 
                            type="text" 
                            @focus="fieldFocus"
                            @blur="fieldBlur"
                             />
                    </li>
                </ul>
                {{message}}
            </div>
            <h2 class="cell-title">Cell</h2>
            <div>
                <ul>
                    <li class="cell-warp clearfix">
                        <span class="cell-l-icon-warp fl" v-show="cellIconIsShow?true:false"><img :src="cellLeftIcon" alt="图标" class="cell-icon"/></span>
                        <span class="cell-text-warp fl">{{cellTitle}}</span>
                        <span class="cell-r-icon-warp fr"><img :src="cellRightIcon" class="cell-icon" /></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import TopTitle from "@/components/topTitle/topTitle1"
export default {
    name:'inputForm',
    components:{
        TopTitle
    },
    data(){
        return{
            TitleText:'Field/Cell',
            fieldIcon:require('../../assets/icon/changshi.png'),
            fieldTitle:'姓名',
            message:'',
            fieldIconIsshow:false,
            fieldPlaceholder:'请输入关键字',
            cellLeftIcon:require('../../assets/icon/changshi.png'),
            cellIconIsShow:true,
            cellTitle:'更多',
            cellRightIcon:require('../../assets/icon/next.png')
        }
    },
    props:['propsFieldIcon','propsFieldIconIsshow','propsFieldTitle','propsFieldPlaceholder','isShow',
            'propsCellIconIsShow','propsCellLeftIcon','propsCellTitle','propsCellRightIcon'
    ],
    created(){
        if(this.propsFieldIcon!=undefined){
            this.fieldIcon=this.propsFieldIcon
        }
        if(this.propsFieldIconIsshow!=undefined){
            this.fieldIconIsshow=this.propsFieldIconIsshow
        }
        if(this.propsFieldTitle!=undefined){
            this.fieldTitle=this.propsFieldTitle
        }
        if(this.propsFieldPlaceholder!=undefined){
            this.fieldPlaceholder=this.propsFieldPlaceholder
        }
        if(this.propsCellIconIsShow!=undefined){
            this.cellIconIsShow=this.propsCellIconIsShow
        }
        if(this.propsCellLeftIcon!=undefined){
            this.cellLeftIcon=this.propsCellLeftIcon
        }
        if(this.propsCellTitle!=undefined){
            this.cellTitle=this.propsCellTitle
        }
        if(this.propsCellRightIcon!=undefined){
            this.cellRightIcon=this.propsCellRightIcon
        }
    },
    methods:{
        fieldFocus(){
            console.log("9999")
        },
        fieldBlur(){
            console.log('8888')
        }
    }
}
</script>
<style scoped>
.cell-field{
    height: 400px;
    overflow: hidden;
}
.field-title,.cell-title{
    padding:0 32px;
    line-height: 80px;
    background: #f2f2f2;
    margin-top: 16px;
}
.title-conter{
    position:absolute;
    width:100%;
}
/* field */
.field-warp{
    line-height: 88px;
    height: 88px;
    padding:0 20px;
    border-bottom:1px solid #515151;
    font-size:24px
}
.field-icon{
    width:40px;
    height:40px;
    vertical-align:middle;
    margin-bottom: 6px
}
.field-icon-warp,.field-text-warp{
    margin-right:7px;
    
}
.field{
    width:70%;
    font-size:24px;
    line-height: 50px;
    margin-top:15px;
    color:#515151
}
/* cell */
.cell-text-warp{
    font-size: 24px
}
.cell-icon{
    width:40px;
    height:40px;
    vertical-align: middle;
    margin-right:5px
}
.cell-warp{
    line-height: 88px;
    padding:0 20px;
    border-bottom:1px solid #eee
}


</style>
